<template>
    <div class="home">
        <img src="@/assets/images/bg.png" class="bg-img" v-show="isShowBg">
        <div class="info-box" v-show="isWelcome">
            <div class="main-title"><img src="@/assets/images/main-title@2x.png"></div>
            <div class="respect"><img src="@/assets/images/respect@2x.png"></div>
            <div class="join-btn"><span @click="getStart">我要参与</span></div>
            <div class="bottom-state">社区群众满意度调查问卷</div>
        </div>
        <div class="info-box" v-show="curPage === 1">
            <div class="form-box">
                <div class="form">
                    <div class="title">完善信息</div>
                    <ul>
                        <li class="dis-flex input-box">
                            <div class="item-name require">户籍</div>
                            <div class="flex1" @click="showArea = true">
                                <!-- <input type="text" placeholder="请填写" v-model.trim="huji"> -->
                                <div class="huji-box" v-if="huji">{{ huji }}</div>
                                <div class="none-data" v-else>请选择</div>
                            </div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name require">年龄</div>
                            <div class="flex1"><input type="tel" placeholder="请填写" v-model.trim="nianlin"></div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name require">职业</div>
                            <div class="flex1"><input type="text" placeholder="请填写" v-model.trim="zhiye"></div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name require">文化程度</div>
                            <div class="flex1">
                                <div class="dis-flex align-items select-box">
                                    <div class="flex1 choose-val">{{ wenhuaName }}</div>
                                    <img src="@/assets/images/can-select.png">
                                    <select v-model="wenhua" @change="handleWenhua">
                                        <option value="">请选择</option>
                                        <template v-for="(item, index) in wenhuaList">
                                            <option :value="item.id">{{ item.name }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name require">政治面貌</div>
                            <div class="flex1">
                                <div class="dis-flex align-items select-box">
                                    <div class="flex1 choose-val">{{ zhengzhiName }}</div>
                                    <img src="@/assets/images/can-select.png">
                                    <select v-model="zhengzhi" @change="handleZhengzhi">
                                        <option value="">请选择</option>
                                        <template v-for="(item, index) in zhengzhiList">
                                            <option :value="item.id">{{ item.name }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name require">所属社区</div>
                            <div class="flex1">
                                <div class="dis-flex align-items select-box">
                                    <div class="flex1 choose-val">{{ shequName }}</div>
                                    <img src="@/assets/images/can-select.png">
                                    <select v-model="shequ" @change="handleShequ">
                                        <option value="">请选择</option>
                                        <template v-for="(item, index) in shequList">
                                            <option :value="item.id">{{ item.name }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name">本社区居住时间</div>
                            <!-- <div class="flex1"><input type="text" placeholder="请填写" v-model.trim="shijian"></div> -->
                            <div class="flex1">
                                <div class="dis-flex align-items select-box">
                                    <div class="flex1 choose-val">{{ shijianName }}</div>
                                    <img src="@/assets/images/can-select.png">
                                    <select v-model="shijian" @change="handleShijian">
                                        <option value="">请选择</option>
                                        <template v-for="(item, index) in shijianList">
                                            <option :value="item.value">{{ item.name }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name">本社区工作时间</div>
                            <div class="flex1">
                                <div class="dis-flex align-items select-box">
                                    <div class="flex1 choose-val">{{ workTimeName }}</div>
                                    <img src="@/assets/images/can-select.png">
                                    <select v-model="workTime" @change="handleWorkTime">
                                        <option value="">请选择</option>
                                        <template v-for="(item, index) in shijianList">
                                            <option :value="item.value">{{ item.name }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="dis-flex input-box">
                            <div class="item-name require">所属身份</div>
                            <div class="flex1">
                                <div class="dis-flex align-items select-box">
                                    <div class="flex1 choose-val">{{ shenfengName }}</div>
                                    <img src="@/assets/images/can-select.png">
                                    <select v-model="shenfeng" @change="handleShenfeng">
                                        <option value="">请选择</option>
                                        <template v-for="(item, index) in  shenfengList">
                                            <option :value="item.id">{{ item.name }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="submit-btn"><span @click="submitInfo">提交</span></div>
        </div>

        <!-- 第1 ~ 28 题  start -->
        <div class="info-box" v-show="curPage === 2">
            <div class="test-box">
                <div class="title">1.您认为社区对党的路线方针政策宣传力度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansOne = 1">
                        <div class="radio-box" :class="{'active': ansOne == 1}"></div>
                        <div class="flex1 answer">A.宣传力度非常到位，我能及时了解党和国家的路线方针政策</div>
                    </li>
                    <li class="dis-flex" @click="ansOne = 2">
                        <div class="radio-box" :class="{'active': ansOne == 2}"></div>
                        <div class="flex1 answer">B.宣传力度比较到位，我能较好了解党和国家的路线方针政策</div>
                    </li>
                    <li class="dis-flex" @click="ansOne = 3">
                        <div class="radio-box" :class="{'active': ansOne == 3}"></div>
                        <div class="flex1 answer">C.宣传力度一般，我听说过党和国家的路线方针政策</div>
                    </li>
                    <li class="dis-flex" @click="ansOne = 4">
                        <div class="radio-box" :class="{'active': ansOne == 4}"></div>
                        <div class="flex1 answer">D.宣传力度较差，我需要从其他信息来源了解相关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansOne = 5">
                        <div class="radio-box" :class="{'active': ansOne == 5}"></div>
                        <div class="flex1 answer">E.基本无宣传</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsOneNext">下一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 3">
            <div class="test-box">
                <div class="title">2.您认为社区党委组织的各类活动或提供的相关服务质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwo = 1">
                        <div class="radio-box" :class="{'active': ansTwo == 1}"></div>
                        <div class="flex1 answer">A.质量很高，形式富有新意，活动亮点突出，服务十分到位，是社区党建工作的有力抓手</div>
                    </li>
                    <li class="dis-flex" @click="ansTwo = 2">
                        <div class="radio-box" :class="{'active': ansTwo == 2}"></div>
                        <div class="flex1 answer">B.质量较高，形式较为新颖，活动有较多亮点，服务比较到位</div>
                    </li>
                    <li class="dis-flex" @click="ansTwo = 3">
                        <div class="radio-box" :class="{'active': ansTwo == 3}"></div>
                        <div class="flex1 answer">C.质量一般，整体活动和服务中规中矩</div>
                    </li>
                    <li class="dis-flex" @click="ansTwo = 4">
                        <div class="radio-box" :class="{'active': ansTwo == 4}"></div>
                        <div class="flex1 answer">D.质量较差，活动缺乏亮点，服务较差</div>
                    </li>
                    <li class="dis-flex" @click="ansTwo = 5">
                        <div class="radio-box" :class="{'active': ansTwo == 5}"></div>
                        <div class="flex1 answer">E.社区基本不组织活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwoNext">下一题</span>
                        <span class="prev" @click="handleAnsTwoPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 4">
            <div class="test-box">
                <div class="title">您是否去过社区的党群服务中心</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansThree === 1}" @click="handleAnsThreeYes">是</span>
                        <span class="no" :class="{'active': ansThree === 2}" @click="handleAnsThreeNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 5">
            <div class="test-box">
                <div class="title">3.您认为社区党群服务中心的服务功能及配套设施怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFour = 1">
                        <div class="radio-box" :class="{'active': ansFour == 1}"></div>
                        <div class="flex1 answer">A.社区党群服务中心的服务功能及配套设施很健全，我很满意“四点半课堂”、“党员志愿者培训”等多种服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFour = 2">
                        <div class="radio-box" :class="{'active': ansFour == 2}"></div>
                        <div class="flex1 answer">B.社区党群服务中心的服务功能及配套设施比较健全，我比较满意“四点半课堂”、“党员志愿者培训”等服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFour = 3">
                        <div class="radio-box" :class="{'active': ansFour == 3}"></div>
                        <div class="flex1 answer">C.社区党群服务中心的服务功能及配套设施比较一般，提供一些基础服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFour = 4">
                        <div class="radio-box" :class="{'active': ansFour == 4}"></div>
                        <div class="flex1 answer">D.社区党群服务中心的服务功能及配套设施较差，只提供较少服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFour = 5">
                        <div class="radio-box" :class="{'active': ansFour == 5}"></div>
                        <div class="flex1 answer">E.社区党群服务中心的服务功能及配套设施欠缺，基本不提供服务</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourNext">下一题</span>
                        <span class="prev" @click="handleAnsFourPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 6">
            <div class="test-box">
                <div class="title">4.您认为社区组织的文体活动质量如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansFive = 1">
                        <div class="radio-box" :class="{'active': ansFive == 1}"></div>
                        <div class="flex1 answer">A.社区组织了很多高质量的文体活动，形式新颖，吸引了很多居民参加</div>
                    </li>
                    <li class="dis-flex" @click="ansFive = 2">
                        <div class="radio-box" :class="{'active': ansFive == 2}"></div>
                        <div class="flex1 answer">B.社区组织文体活动比较活跃，质量较高，能够吸引较多居民参加</div>
                    </li>
                    <li class="dis-flex" @click="ansFive = 3">
                        <div class="radio-box" :class="{'active': ansFive == 3}"></div>
                        <div class="flex1 answer">C.社区组织活动的频率和质量都比较一般</div>
                    </li>
                    <li class="dis-flex" @click="ansFive = 4">
                        <div class="radio-box" :class="{'active': ansFive == 4}"></div>
                        <div class="flex1 answer">D.社区很少组织文体活动，质量较差</div>
                    </li>
                    <li class="dis-flex" @click="ansFive = 5">
                        <div class="radio-box" :class="{'active': ansFive == 5}"></div>
                        <div class="flex1 answer">E.社区基本没有组织过文体活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiveNext">下一题</span>
                        <span class="prev" @click="handleAnsFivePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 7">
            <div class="test-box">
                <div class="title">5.您认为社区文化体育娱乐设施的维护情况怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansSix = 1">
                        <div class="radio-box" :class="{'active': ansSix == 1}"></div>
                        <div class="flex1 answer">A.相关设施维护得很好，经常会看到工作人员巡查，文体设施基本无人破坏</div>
                    </li>
                    <li class="dis-flex" @click="ansSix = 2">
                        <div class="radio-box" :class="{'active': ansSix == 2}"></div>
                        <div class="flex1 answer">B.相关设施维护得较好，偶尔会看到工作人员巡查，很少看到用文体设施晒被子等不文明现象</div>
                    </li>
                    <li class="dis-flex" @click="ansSix = 3">
                        <div class="radio-box" :class="{'active': ansSix == 3}"></div>
                        <div class="flex1 answer">C.相关设施维护得一般，有时会看到工作人员巡查，偶尔出现用文体设施晒被子、恶意破坏等不文明现象但很快被制止</div>
                    </li>
                    <li class="dis-flex" @click="ansSix = 4">
                        <div class="radio-box" :class="{'active': ansSix == 4}"></div>
                        <div class="flex1 answer">D.相关设施维护的较差，很少有工作人员巡查，经常出现用文体设施晒被子、恶意破坏等现象</div>
                    </li>
                    <li class="dis-flex" @click="ansSix = 5">
                        <div class="radio-box" :class="{'active': ansSix == 5}"></div>
                        <div class="flex1 answer">E.无人维护文体设施，相关设施无法正常使用，基本被废弃</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsSixNext">下一题</span>
                        <span class="prev" @click="handleAnsSixPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 8">
            <div class="test-box">
                <div class="title">您是否直接接触过妇联相关工作</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansSeven === 1}" @click="handleAnsSevenYes">是</span>
                        <span class="no" :class="{'active': ansSeven === 2}" @click="handleAnsSevenNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 9">
            <div class="test-box">
                <div class="title">6.您认为社区妇联工作质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansEight = 1">
                        <div class="radio-box" :class="{'active': ansEight == 1}"></div>
                        <div class="flex1 answer">A.工作质量很高，社区十分重视关爱妇女儿童工作，积极主动发现问题并及时提供维权、调解等服务</div>
                    </li>
                    <li class="dis-flex" @click="ansEight = 2">
                        <div class="radio-box" :class="{'active': ansEight == 2}"></div>
                        <div class="flex1 answer">B.工作质量较高，社区重视关爱妇女儿童工作，能够提供较多维权、调解等服务</div>
                    </li>
                    <li class="dis-flex" @click="ansEight = 3">
                        <div class="radio-box" :class="{'active': ansEight == 3}"></div>
                        <div class="flex1 answer">C.工作质量一般，社区对关爱妇女儿童工作重视程度一般，提供基本的维权、调解等服务</div>
                    </li>
                    <li class="dis-flex" @click="ansEight = 4">
                        <div class="radio-box" :class="{'active': ansEight == 4}"></div>
                        <div class="flex1 answer">D.工作质量较差，社区不太重视关爱妇女儿童工作，基本不提供相关维权、调解等服务</div>
                    </li>
                    <li class="dis-flex" @click="ansEight = 5">
                        <div class="radio-box" :class="{'active': ansEight == 5}"></div>
                        <div class="flex1 answer">E.社区几乎不开展相关工作</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsEightNext">下一题</span>
                        <span class="prev" @click="handleAnsEightPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 10">
            <div class="test-box">
                <div class="title">7.您认为社区对社会福利（老人、残疾人、低保等）政策的宣传力度如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansNine = 1">
                        <div class="radio-box" :class="{'active': ansNine == 1}"></div>
                        <div class="flex1 answer">A.宣传力度十分到位，我能够第一时间了解最新社会福利政策</div>
                    </li>
                    <li class="dis-flex" @click="ansNine = 2">
                        <div class="radio-box" :class="{'active': ansNine == 2}"></div>
                        <div class="flex1 answer">B.宣传力度较大，我能够大致了解社会福利政策的变化</div>
                    </li>
                    <li class="dis-flex" @click="ansNine = 3">
                        <div class="radio-box" :class="{'active': ansNine == 3}"></div>
                        <div class="flex1 answer">C.宣传力度一般，我只能粗略了解社会福利政策的变化</div>
                    </li>
                    <li class="dis-flex" @click="ansNine = 4">
                        <div class="radio-box" :class="{'active': ansNine == 4}"></div>
                        <div class="flex1 answer">D.宣传力度较差，我需要通过其他信息来源了解最新社会福利政策</div>
                    </li>
                    <li class="dis-flex" @click="ansNine = 5">
                        <div class="radio-box" :class="{'active': ansNine == 5}"></div>
                        <div class="flex1 answer">E.基本无宣传</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsNineNext">下一题</span>
                        <span class="prev" @click="handleAnsNinePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 11">
            <div class="test-box">
                <div class="title">8.您对社区内的紧急避难场所和避难安置是否了解？</div>
                <ul>
                    <li class="dis-flex" @click="ansTen = 1">
                        <div class="radio-box" :class="{'active': ansTen == 1}"></div>
                        <div class="flex1 answer">A.我非常清楚社区紧急避难场所的位置；发生紧急避难事件时，社区反应速度很快，快速组织社区群众前往避难</div>
                    </li>
                    <li class="dis-flex" @click="ansTen = 2">
                        <div class="radio-box" :class="{'active': ansTen == 2}"></div>
                        <div class="flex1 answer">B.我比较清楚社区紧急避难场所的位置；发生紧急避难事件时，社区反应速度较快</div>
                    </li>
                    <li class="dis-flex" @click="ansTen = 3">
                        <div class="radio-box" :class="{'active': ansTen == 3}"></div>
                        <div class="flex1 answer">C.我知道社区紧急避难场所的大概位置；发生紧急避难事件时，社区反应速度一般</div>
                    </li>
                    <li class="dis-flex" @click="ansTen = 4">
                        <div class="radio-box" :class="{'active': ansTen == 4}"></div>
                        <div class="flex1 answer">D.我听说过社区有紧急避难场所，但不清楚具体位置</div>
                    </li>
                    <li class="dis-flex" @click="ansTen = 5">
                        <div class="radio-box" :class="{'active': ansTen == 5}"></div>
                        <div class="flex1 answer">E.我完全不知道社区有紧急避难场所</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTenNext">下一题</span>
                        <span class="prev" @click="handleAnsTenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 12">
            <div class="test-box">
                <div class="title">9.您了解社区开展的民生微实事工作吗？</div>
                <ul>
                    <li class="dis-flex" @click="ansEleven = 1">
                        <div class="radio-box" :class="{'active': ansEleven == 1}"></div>
                        <div class="flex1 answer">A.社区在民生微实事方面的宣传非常到位，我很清楚相关政策和参与方式</div>
                    </li>
                    <li class="dis-flex" @click="ansEleven = 2">
                        <div class="radio-box" :class="{'active': ansEleven == 2}"></div>
                        <div class="flex1 answer">B.社区在民生微实事方面的宣传比较到位，我比较清楚相关政策和参与方式</div>
                    </li>
                    <li class="dis-flex" @click="ansEleven = 3">
                        <div class="radio-box" :class="{'active': ansEleven == 3}"></div>
                        <div class="flex1 answer">C.社区在民生微实事方面的宣传一般，我对相关政策和参与方式有一定了解</div>
                    </li>
                    <li class="dis-flex" @click="ansEleven = 4">
                        <div class="radio-box" :class="{'active': ansEleven == 4}"></div>
                        <div class="flex1 answer">D.社区在民生微实事方面的宣传比较少，我对相关政策和参与方式都不是很清楚</div>
                    </li>
                    <li class="dis-flex" @click="ansEleven = 5">
                        <div class="radio-box" :class="{'active': ansEleven == 5}"></div>
                        <div class="flex1 answer">E.社区在民生微实事方面的宣传几乎没有，我完全不清楚民生微实事可以做什么</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsElevenNext">下一题</span>
                        <span class="prev" @click="handleAnsElevenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 13">
            <div class="test-box">
                <div class="title">10.您认为社区开展的民生微实事项目效果如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwelve = 1">
                        <div class="radio-box" :class="{'active': ansTwelve == 1}"></div>
                        <div class="flex1 answer">A.社区积极征集居民意见、推动项目落地实施，能够切实改善社区环境和居民生活</div>
                    </li>
                    <li class="dis-flex" @click="ansTwelve = 2">
                        <div class="radio-box" :class="{'active': ansTwelve == 2}"></div>
                        <div class="flex1 answer">B.社区在征集居民意见方面做得很好，大部分项目都能落地实施，对社区环境和居民生活起到较大改善作用</div>
                    </li>
                    <li class="dis-flex" @click="ansTwelve = 3">
                        <div class="radio-box" :class="{'active': ansTwelve == 3}"></div>
                        <div class="flex1 answer">C.社区有征集居民意见，居民呼声较高的项目基本能够落地实施</div>
                    </li>
                    <li class="dis-flex" @click="ansTwelve = 4">
                        <div class="radio-box" :class="{'active': ansTwelve == 4}"></div>
                        <div class="flex1 answer">D.社区很少征集居民意见，落地实施的项目不是居民想要的，对社区环境和居民生活改善作用很小</div>
                    </li>
                    <li class="dis-flex" @click="ansTwelve = 5">
                        <div class="radio-box" :class="{'active': ansTwelve == 5}"></div>
                        <div class="flex1 answer">E.社区几乎没有征集居民意见，没感受到民生微实事项目的作用</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwelveNext">下一题</span>
                        <span class="prev" @click="handleAnsTwelvePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 14">
            <div class="test-box">
                <div class="title">您是否在社区居委会办理过相关业务或接触过居委会事务工作</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansThirteen === 1}" @click="handleAnsThirteenYes">是</span>
                        <span class="no" :class="{'active': ansThirteen === 2}" @click="handleAnsThirteenNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 15">
            <div class="test-box">
                <div class="title">11.您是否清楚社区居委会能够提供哪些服务？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourteen = 1">
                        <div class="radio-box" :class="{'active': ansFourteen == 1}"></div>
                        <div class="flex1 answer">A.居委会宣传工作非常到位，我很清楚居委会能够为我提供哪些服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFourteen = 2">
                        <div class="radio-box" :class="{'active': ansFourteen == 2}"></div>
                        <div class="flex1 answer">B.居委会经常组织宣传，我比较清楚居委会能够提供的服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFourteen = 3">
                        <div class="radio-box" :class="{'active': ansFourteen == 3}"></div>
                        <div class="flex1 answer">C.居委会偶尔组织宣传，我大概清楚居委会能够提供的服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFourteen = 4">
                        <div class="radio-box" :class="{'active': ansFourteen == 4}"></div>
                        <div class="flex1 answer">D.居委会很少宣传，我只听说过居委会可以提供服务，但不了解有哪些</div>
                    </li>
                    <li class="dis-flex" @click="ansFourteen = 5">
                        <div class="radio-box" :class="{'active': ansFourteen == 5}"></div>
                        <div class="flex1 answer">E.我不知道居委会能够为我提供服务</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourTeenNext">下一题</span>
                        <span class="prev" @click="handleAnsFourTeenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 16">
            <div class="test-box">
                <div class="title">12.您认为社区居委会工作人员服务态度和工作效率如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansFiveteen = 1">
                        <div class="radio-box" :class="{'active': ansFiveteen == 1}"></div>
                        <div class="flex1 answer">A.服务态度很好，悉心为我讲解相关政策，耐心提供服务，主动高效帮我解决问题</div>
                    </li>
                    <li class="dis-flex" @click="ansFiveteen = 2">
                        <div class="radio-box" :class="{'active': ansFiveteen == 52}"></div>
                        <div class="flex1 answer">B.服务态度较好，较为耐心为我讲解相关政策，工作效率较高</div>
                    </li>
                    <li class="dis-flex" @click="ansFiveteen = 3">
                        <div class="radio-box" :class="{'active': ansFiveteen == 3}"></div>
                        <div class="flex1 answer">C.服务态度一般，工作效率一般，能够帮我解决基本问题</div>
                    </li>
                    <li class="dis-flex" @click="ansFiveteen = 4">
                        <div class="radio-box" :class="{'active': ansFiveteen == 4}"></div>
                        <div class="flex1 answer">D.服务态度较差，工作效率低，基本不能帮我解决问题</div>
                    </li>
                    <li class="dis-flex" @click="ansFiveteen = 5">
                        <div class="radio-box" :class="{'active': ansFiveteen == 5}"></div>
                        <div class="flex1 answer">E.服务态度恶劣，工作效率很低</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiveTeenNext">下一题</span>
                        <span class="prev" @click="handleAnsFiveTeenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 17">
            <div class="test-box">
                <div class="title">您是否有见到过或接受过居委会调解纠纷的经历</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansSixTeen === 1}" @click="handleAnsSixteenYes">是</span>
                        <span class="no" :class="{'active': ansSixTeen === 2}" @click="handleAnsSixteenNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 18">
            <div class="test-box">
                <div class="title">13.您认为居委会调解纠纷时工作人员态度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansSeventeen = 1">
                        <div class="radio-box" :class="{'active': ansSeventeen == 1}"></div>
                        <div class="flex1 answer">A.居委会工作人员态度很好，耐心倾听双方诉说，尽力调解纠纷</div>
                    </li>
                    <li class="dis-flex" @click="ansSeventeen = 2">
                        <div class="radio-box" :class="{'active': ansSeventeen == 2}"></div>
                        <div class="flex1 answer">B.居委会工作人员态度较好，细心劝说双方，调解成效较好</div>
                    </li>
                    <li class="dis-flex" @click="ansSeventeen = 3">
                        <div class="radio-box" :class="{'active': ansSeventeen == 3}"></div>
                        <div class="flex1 answer">C.居委会工作人员态度一般，调解过程中起到一定缓和作用</div>
                    </li>
                    <li class="dis-flex" @click="ansSeventeen = 4">
                        <div class="radio-box" :class="{'active': ansSeventeen == 4}"></div>
                        <div class="flex1 answer">D.居委会工作人员态度较差，调解过程中很不耐烦，我很不满意</div>
                    </li>
                    <li class="dis-flex" @click="ansSeventeen = 5">
                        <div class="radio-box" :class="{'active': ansSeventeen == 5}"></div>
                        <div class="flex1 answer">E.居委会工作人员很不耐烦，让我们自己解决，并没有从中调解</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsSeventeenNext">下一题</span>
                        <span class="prev" @click="handleAnsSeventeenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 19">
            <div class="test-box">
                <div class="title">您是否在社区办理过二次装修备案相关业务</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansEighteen === 1}" @click="handleAnsEighteenYes">是</span>
                        <span class="no" :class="{'active': ansEighteen === 2}" @click="handleAnsEighteenNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 20">
            <div class="test-box">
                <div class="title">14.您认为社区二次装修备案工作人员服务态度和工作效率如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansNineteen = 1">
                        <div class="radio-box" :class="{'active': ansNineteen == 1}"></div>
                        <div class="flex1 answer">A.态度很好，能够做到微笑服务；效率很高，快速为我办理相关业务</div>
                    </li>
                    <li class="dis-flex" @click="ansNineteen = 2">
                        <div class="radio-box" :class="{'active': ansNineteen == 2}"></div>
                        <div class="flex1 answer">B.态度较好，耐心为我办理业务；效率较高，较快为我办理相关业务</div>
                    </li>
                    <li class="dis-flex" @click="ansNineteen = 3">
                        <div class="radio-box" :class="{'active': ansNineteen == 3}"></div>
                        <div class="flex1 answer">C.态度一般，效率一般，办理业务速度中规中矩</div>
                    </li>
                    <li class="dis-flex" @click="ansNineteen = 4">
                        <div class="radio-box" :class="{'active': ansNineteen == 4}"></div>
                        <div class="flex1 answer">D.态度较差，有时会表现出不耐烦；效率较差，业务能力不强，办事速度较慢</div>
                    </li>
                    <li class="dis-flex" @click="ansNineteen = 5">
                        <div class="radio-box" :class="{'active': ansNineteen == 5}"></div>
                        <div class="flex1 answer">E.态度恶劣，效率低下</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsNineteenNext">下一题</span>
                        <span class="prev" @click="handleAnsNineteenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 21">
            <div class="test-box">
                <div class="title">您是否有过与物业公司产生纠纷接受调解的经历</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansTwentyOne === 1}" @click="handleAnsTwentyOneYes">是</span>
                        <span class="no" :class="{'active': ansTwentyOne === 2}" @click="handleAnsTwentyOneNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 22">
            <div class="test-box">
                <div class="title">15.您认为社区对业主与物业公司纠纷调解工作做得怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwentyTwo = 1">
                        <div class="radio-box" :class="{'active': ansTwentyTwo == 1}"></div>
                        <div class="flex1 answer">A.很好，经调解后纠纷双方迅速达成共识并解决问题</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyTwo = 2">
                        <div class="radio-box" :class="{'active': ansTwentyTwo == 2}"></div>
                        <div class="flex1 answer">B.较好，经调解后纠纷双方态度有所缓和，并最终解决问题</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyTwo = 3">
                        <div class="radio-box" :class="{'active': ansTwentyTwo == 3}"></div>
                        <div class="flex1 answer">C.一般，经调解后纠纷双方态度暂时缓和，纠纷并未解决</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyTwo = 4">
                        <div class="radio-box" :class="{'active': ansTwentyTwo == 4}"></div>
                        <div class="flex1 answer">D.较差，经调解后纠纷双方不为所动，持续争吵</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyTwo = 5">
                        <div class="radio-box" :class="{'active': ansTwentyTwo == 5}"></div>
                        <div class="flex1 answer">E.很差，经调解后纠纷双方不但没有缓和，反而愈演愈烈</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwentyTwoNext">下一题</span>
                        <span class="prev" @click="handleAnsTwentyTwoPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 23">
            <div class="test-box">
                <div class="title">16.每年汛期来临时，社区的预警工作做得怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwentyThree = 1">
                        <div class="radio-box" :class="{'active': ansTwentyThree == 1}"></div>
                        <div class="flex1 answer">A.社区通过各种渠道发布预警，提前通知居民做好防洪防汛措施，有效控制灾情</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyThree = 2">
                        <div class="radio-box" :class="{'active': ansTwentyThree == 2}"></div>
                        <div class="flex1 answer">B.社区及时发布预警，通知居民做好防洪防汛措施，减少汛期灾情</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyThree = 3">
                        <div class="radio-box" :class="{'active': ansTwentyThree == 3}"></div>
                        <div class="flex1 answer">C.社区汛期预警工作做得一般，偶尔会因为通知不及时出现灾情</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyThree = 4">
                        <div class="radio-box" :class="{'active': ansTwentyThree == 4}"></div>
                        <div class="flex1 answer">D.社区没有做好汛期预警工作，因为通知不及时，出现较多灾情</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyThree = 5">
                        <div class="radio-box" :class="{'active': ansTwentyThree == 5}"></div>
                        <div class="flex1 answer">E.社区在汛期预警方面毫无准备，居民不了解汛期信息</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwentyThreeNext">下一题</span>
                        <span class="prev" @click="handleAnsTwentyThreePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 24">
            <div class="test-box">
                <div class="title">您是否在社区办理过法律咨询相关业务或接触过普法相关工作</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansTwentyfour === 1}" @click="handleAnsTwentyfourYes">是</span>
                        <span class="no" :class="{'active': ansTwentyfour === 2}" @click="handleAnsTwentyfourNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 25">
            <div class="test-box">
                <div class="title">17.您认为社区法制教育与法制宣传的力度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwentyFive = 1">
                        <div class="radio-box" :class="{'active': ansTwentyFive == 1}"></div>
                        <div class="flex1 answer">A.法制教育与宣传力度非常到位，经常看到宣传海报，积极组织各种宣传教育活动</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyFive = 2">
                        <div class="radio-box" :class="{'active': ansTwentyFive == 2}"></div>
                        <div class="flex1 answer">B.法制教育与宣传力度比较到位，较常看到宣传海报，偶尔组织宣传教育活动</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyFive = 3">
                        <div class="radio-box" :class="{'active': ansTwentyFive == 3}"></div>
                        <div class="flex1 answer">C.法制教育与宣传力度一般，偶尔看到一些宣传海报，但相关活动不多</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyFive = 4">
                        <div class="radio-box" :class="{'active': ansTwentyFive == 4}"></div>
                        <div class="flex1 answer">D.法制教育宣传力度较差，只在社区工作站等特定地方才有一些宣传海报，平时很难看到</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyFive = 5">
                        <div class="radio-box" :class="{'active': ansTwentyFive == 5}"></div>
                        <div class="flex1 answer">E.我没见过社区组织法制教育与宣传</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwentyFiveNext">下一题</span>
                        <span class="prev" @click="handleAnsTwentyFivePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 26">
            <div class="test-box">
                <div class="title">18.您认为社区普法工作人员提供法律咨询服务时态度如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwentySix = 1">
                        <div class="radio-box" :class="{'active': ansTwentySix == 1}"></div>
                        <div class="flex1 answer">A.态度很好，耐心倾听我的需求、解决疑问，主动为我提供帮助</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentySix = 2">
                        <div class="radio-box" :class="{'active': ansTwentySix == 2}"></div>
                        <div class="flex1 answer">B.态度较好，耐心解答我的疑问，并且给到有效帮助</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentySix = 3">
                        <div class="radio-box" :class="{'active': ansTwentySix == 3}"></div>
                        <div class="flex1 answer">C.态度一般，愿意解答我的疑问</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentySix = 4">
                        <div class="radio-box" :class="{'active': ansTwentySix == 4}"></div>
                        <div class="flex1 answer">D.态度较差，与我沟通的过程中缺乏耐心</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentySix = 5">
                        <div class="radio-box" :class="{'active': ansTwentySix == 5}"></div>
                        <div class="flex1 answer">E.态度恶劣</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwentySixNext">下一题</span>
                        <span class="prev" @click="handleAnsTwentySixPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 27">
            <div class="test-box">
                <div class="title">您是否在社区有过向社区去电、去信等反映问题的经历</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansTwentySeven === 1}" @click="handleAnsTwentySevenYes">是</span>
                        <span class="no" :class="{'active': ansTwentySeven === 2}" @click="handleAnsTwentySevenNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 28">
            <div class="test-box">
                <div class="title">19.您认为社区信访工作人员服务态度如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansTwentyEight = 1">
                        <div class="radio-box" :class="{'active': ansTwentyEight == 1}"></div>
                        <div class="flex1 answer">A.态度很好，热情接待、耐心倾听，及时记录我的信访诉求</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyEight = 2">
                        <div class="radio-box" :class="{'active': ansTwentyEight == 2}"></div>
                        <div class="flex1 answer">B.态度较好，比较耐心倾听并且记录我的诉求</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyEight = 3">
                        <div class="radio-box" :class="{'active': ansTwentyEight == 3}"></div>
                        <div class="flex1 answer">C.态度一般，愿意倾听我的诉求</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyEight = 4">
                        <div class="radio-box" :class="{'active': ansTwentyEight == 4}"></div>
                        <div class="flex1 answer">D.态度较差，对我不理不睬</div>
                    </li>
                    <li class="dis-flex" @click="ansTwentyEight = 5">
                        <div class="radio-box" :class="{'active': ansTwentyEight == 5}"></div>
                        <div class="flex1 answer">E.态度恶劣</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsTwentyEightNext">下一题</span>
                        <span class="prev" @click="handleAnsTwentyEightPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 29">
            <div class="test-box">
                <div class="title">您是否有接受劳资纠纷调解的经历</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansTwentyNine === 1}" @click="handleAnsTwentyNineYes">是</span>
                        <span class="no" :class="{'active': ansTwentyNine === 2}" @click="handleAnsTwentyNineNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 30">
            <div class="test-box">
                <div class="title">20.您认为劳资纠纷调解的工作人员服务态度如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirty = 1">
                        <div class="radio-box" :class="{'active': ansThirty == 1}"></div>
                        <div class="flex1 answer">A.工作人员态度很好，耐心倾听双方诉说，尽力调解纠纷，双方很快和解</div>
                    </li>
                    <li class="dis-flex" @click="ansThirty = 2">
                        <div class="radio-box" :class="{'active': ansThirty == 2}"></div>
                        <div class="flex1 answer">B.工作人员态度较好，能够细心劝说双方，调解成效较好</div>
                    </li>
                    <li class="dis-flex" @click="ansThirty = 3">
                        <div class="radio-box" :class="{'active': ansThirty == 3}"></div>
                        <div class="flex1 answer">C.工作人员态度一般，调解过程中能够起到一定缓和作用</div>
                    </li>
                    <li class="dis-flex" @click="ansThirty = 4">
                        <div class="radio-box" :class="{'active': ansThirty == 4}"></div>
                        <div class="flex1 answer">D.工作人员态度较差，调解过程中很不耐烦，调解效果不好</div>
                    </li>
                    <li class="dis-flex" @click="ansThirty = 5">
                        <div class="radio-box" :class="{'active': ansThirty == 5}"></div>
                        <div class="flex1 answer">E.工作人员极不耐烦，让我们自己解决，并没有从中调解</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 31">
            <div class="test-box">
                <div class="title">21.您认为每年7-10月份社区对民兵、征兵工作的宣传力度如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyOne = 1">
                        <div class="radio-box" :class="{'active': ansThirtyOne == 1}"></div>
                        <div class="flex1 answer">A.宣传力度非常到位，我在社区各处都能看到相关宣传海报</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyOne = 2">
                        <div class="radio-box" :class="{'active': ansThirtyOne == 2}"></div>
                        <div class="flex1 answer">B.宣传力度比较到位，我在社区主要街道都能看到相关宣传海报</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyOne = 3">
                        <div class="radio-box" :class="{'active': ansThirtyOne == 3}"></div>
                        <div class="flex1 answer">C.宣传力度一般，我能在社区看到相关宣传海报</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyOne = 4">
                        <div class="radio-box" :class="{'active': ansThirtyOne == 4}"></div>
                        <div class="flex1 answer">D.宣传力度较差，我只能在社区个别地方看到相关宣传海报</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyOne = 5">
                        <div class="radio-box" :class="{'active': ansThirtyOne == 5}"></div>
                        <div class="flex1 answer">E.基本无宣传</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyOneNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyOnePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 32">
            <div class="test-box">
                <div class="title">22.您认为社区治安环境怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyTwe = 1">
                        <div class="radio-box" :class="{'active': ansThirtyTwe == 1}"></div>
                        <div class="flex1 answer">A.治安环境很好，很少发生治安事件，我感觉在社区的工作与生活非常安全</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyTwe = 2">
                        <div class="radio-box" :class="{'active': ansThirtyTwe == 2}"></div>
                        <div class="flex1 answer">B.治安环境较好，与去年相比有较大进步，较少发生恶性治安事件</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyTwe = 3">
                        <div class="radio-box" :class="{'active': ansThirtyTwe == 3}"></div>
                        <div class="flex1 answer">C.治安环境一般，与去年相比稍有好转</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyTwe = 4">
                        <div class="radio-box" :class="{'active': ansThirtyTwe == 4}"></div>
                        <div class="flex1 answer">D.治安环境较差，恶性治安事件比去年多</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyTwe = 5">
                        <div class="radio-box" :class="{'active': ansThirtyTwe == 5}"></div>
                        <div class="flex1 answer">E.治安环境极差，经常发生恶性治安事件，我感觉在社区工作和生活都很不安全</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyTweNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyTwePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 33">
            <div class="test-box">
                <div class="title">23.您认为社区应对突发事件工作做得怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyThree = 1">
                        <div class="radio-box" :class="{'active': ansThirtyThree == 1}"></div>
                        <div class="flex1 answer">A.社区反应速度非常快，总能在突发事件发生后的第一时间内采取有效行动，有效控制突发事件造成的危害</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyThree = 2">
                        <div class="radio-box" :class="{'active': ansThirtyThree == 2}"></div>
                        <div class="flex1 answer">B.社区反应速度较快，突发事件发生后快速采取行动，减少突发事件造成的危害</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyThree = 3">
                        <div class="radio-box" :class="{'active': ansThirtyThree == 3}"></div>
                        <div class="flex1 answer">C.社区反应速度一般，突发事件发生后有所行动，突发事件造成的危害较小</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyThree = 4">
                        <div class="radio-box" :class="{'active': ansThirtyThree == 4}"></div>
                        <div class="flex1 answer">D.社区反应速度较慢，突发事件发生一段时间后才采取行动，造成较大危害</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyThree = 5">
                        <div class="radio-box" :class="{'active': ansThirtyThree == 5}"></div>
                        <div class="flex1 answer">E.社区反应速度很慢，突发事件发生后基本没有任何行动，造成严重危害</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyThreeNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyThreePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 34">
            <div class="test-box">
                <div class="title">24.您认为社区在禁毒、打击传销、反诈骗、防邪反邪、扫黑除恶等宣传力度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyFour = 1">
                        <div class="radio-box" :class="{'active': ansThirtyFour == 1}"></div>
                        <div class="flex1 answer">A.宣传工作非常到位，我经常在社区看到宣传海报、标语以及宣传活动，非常清楚见到相关组织或人员后的反馈渠道</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFour = 2">
                        <div class="radio-box" :class="{'active': ansThirtyFour == 2}"></div>
                        <div class="flex1 answer">B.宣传工作比较到位，我在社区看到较多宣传海报、标语以及宣传活动，比较清楚见到相关组织或人员后的反馈渠道</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFour = 3">
                        <div class="radio-box" :class="{'active': ansThirtyFour == 3}"></div>
                        <div class="flex1 answer">C.宣传工作一般，我在禁毒日、315等相关节日能看到宣传海报、标语和宣传活动</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFour = 4">
                        <div class="radio-box" :class="{'active': ansThirtyFour == 4}"></div>
                        <div class="flex1 answer">D.宣传工作不太好，我很少在社区看到宣传海报、标语和宣传活动</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFour = 5">
                        <div class="radio-box" :class="{'active': ansThirtyFour == 5}"></div>
                        <div class="flex1 answer">E.社区几乎没开展过宣传工作</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyFourNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyFourPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 35">
            <div class="test-box">
                <div class="title">25.您认为社区帮助精神病患工作做得怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyFive = 1">
                        <div class="radio-box" :class="{'active': ansThirtyFive == 1}"></div>
                        <div class="flex1 answer">A.工作很到位，我没在社区见到过精神病患肇事肇祸事件发生</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFive = 2">
                        <div class="radio-box" :class="{'active': ansThirtyFive == 2}"></div>
                        <div class="flex1 answer">B.工作比较到位，我偶尔见到精神病患肇事肇祸，但社区工作人员能够第一时间进行处理</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFive = 3">
                        <div class="radio-box" :class="{'active': ansThirtyFive == 3}"></div>
                        <div class="flex1 answer">C.工作效果一般，我有时候见到精神病患肇事肇祸，社区工作人员处理速度一般</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFive = 4">
                        <div class="radio-box" :class="{'active': ansThirtyFive == 4}"></div>
                        <div class="flex1 answer">D.工作效果较差，精神病患肇事肇祸后，社区工作人员没有采取行动</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyFive = 5">
                        <div class="radio-box" :class="{'active': ansThirtyFive == 5}"></div>
                        <div class="flex1 answer">E.工作效果很差，社区精神病患肇事肇祸事件较多，已经造成严重后果</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyFiveNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyFivePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 36">
            <div class="test-box">
                <div class="title">26.您认为社区市容市貌如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtySix = 1">
                        <div class="radio-box" :class="{'active': ansThirtySix == 1}"></div>
                        <div class="flex1 answer">A.市容市貌良好，街道、铺面、小区卫生情况都很好，几乎没有乱摆卖、脏乱差的现象出现</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtySix = 2">
                        <div class="radio-box" :class="{'active': ansThirtySix == 2}"></div>
                        <div class="flex1 answer">B.市容市貌比去年有比较大的改善，乱摆卖、脏乱差等现象大幅减少</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtySix = 3">
                        <div class="radio-box" :class="{'active': ansThirtySix == 3}"></div>
                        <div class="flex1 answer">C.市容市貌与去年相比差不多，还有提升空间</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtySix = 4">
                        <div class="radio-box" :class="{'active': ansThirtySix == 4}"></div>
                        <div class="flex1 answer">D.市容市貌比去年稍差，乱摆卖现象较为严重，社区有些街道脏乱差</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtySix = 5">
                        <div class="radio-box" :class="{'active': ansThirtySix == 5}"></div>
                        <div class="flex1 answer">E.市容市貌比去年差了很多，乱摆卖现象严重，社区许多街道脏乱差，向社区投诉但无人理睬</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtySixNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtySixPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 37">
            <div class="test-box">
                <div class="title">您是否有过网格员上门采集信息的经历</div>
                <div class="dis-flex either-or-box">
                    <div>
                        <span class="yes" :class="{'active': ansThirtySeven === 1}" @click="handleAnsThirtySevenYes">是</span>
                        <span class="no" :class="{'active': ansThirtySeven === 2}" @click="handleAnsThirtySevenNo">否</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 38">
            <div class="test-box">
                <div class="title">27.您认为社区基础管理网格网格员服务态度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyEight = 1">
                        <div class="radio-box" :class="{'active': ansThirtyEight == 1}"></div>
                        <div class="flex1 answer">A.态度很好，采集信息时礼貌有加，并耐心解释其工作目的</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyEight = 2">
                        <div class="radio-box" :class="{'active': ansThirtyEight == 2}"></div>
                        <div class="flex1 answer">B.态度较好，采集信息时较为有礼貌，几乎没有不文明行为</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyEight = 3">
                        <div class="radio-box" :class="{'active': ansThirtyEight == 3}"></div>
                        <div class="flex1 answer">C.态度一般，工作中规中矩，但是没有向我解释采集信息的目的</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyEight = 4">
                        <div class="radio-box" :class="{'active': ansThirtyEight == 4}"></div>
                        <div class="flex1 answer">D.态度较差，在我问采集信息的目的时，对我不理不睬</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyEight = 5">
                        <div class="radio-box" :class="{'active': ansThirtyEight == 5}"></div>
                        <div class="flex1 answer">E.态度恶劣，在我问采集信息的目的时，对我恶语相向</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyEightNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyEightPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 39">
            <div class="test-box">
                <div class="title">28.您认为社区基础管理网格网格员业务能力怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansThirtyNine = 1">
                        <div class="radio-box" :class="{'active': ansThirtyNine == 1}"></div>
                        <div class="flex1 answer">A.业务能力极强，对政策宣传十分到位，并能熟练高效地解答我的问题</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyNine = 2">
                        <div class="radio-box" :class="{'active': ansThirtyNine == 2}"></div>
                        <div class="flex1 answer">B.业务能力较强，能够宣传有关政策，对我提出的问题也能较好的回答</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyNine = 3">
                        <div class="radio-box" :class="{'active': ansThirtyNine == 3}"></div>
                        <div class="flex1 answer">C.业务能力一般，对有关政策宣传不是很详细，对我提出的问题偶尔回答不上来</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyNine = 4">
                        <div class="radio-box" :class="{'active': ansThirtyNine == 4}"></div>
                        <div class="flex1 answer">D.业务能力较差，对有关政策不够了解，无法回答我大部分问题</div>
                    </li>
                    <li class="dis-flex" @click="ansThirtyNine = 5">
                        <div class="radio-box" :class="{'active': ansThirtyNine == 5}"></div>
                        <div class="flex1 answer">E.业务能力极差，完全不知道有关政策信息</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsThirtyNineNext">下一题</span>
                        <span class="prev" @click="handleAnsThirtyNinePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 定制化问题开始 -->
        <div class="info-box" v-show="curPage === 40 && (shenfeng === 1 || shenfeng === 8)">
            <div class="test-box">
                <div class="title">29.您认为社区党组织建设工作质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourty = 1">
                        <div class="radio-box" :class="{'active': ansFourty == 1}"></div>
                        <div class="flex1 answer">A.质量很高，社区能够大力宣传党组织建设工作，加强党内民主建设，组织开展党员教育等活动，起到了战斗堡垒的作用</div>
                    </li>
                    <li class="dis-flex" @click="ansFourty = 2">
                        <div class="radio-box" :class="{'active': ansFourty == 2}"></div>
                        <div class="flex1 answer">B.质量较高，社区不断加大在党组织建设工作上的投入，较为关心党员个人发展</div>
                    </li>
                    <li class="dis-flex" @click="ansFourty = 3">
                        <div class="radio-box" :class="{'active': ansFourty == 3}"></div>
                        <div class="flex1 answer">C.质量一般，社区对党组织建设工作关注度一般</div>
                    </li>
                    <li class="dis-flex" @click="ansFourty = 4">
                        <div class="radio-box" :class="{'active': ansFourty == 4}"></div>
                        <div class="flex1 answer">D.质量较差，社区很少开展相关工作</div>
                    </li>
                    <li class="dis-flex" @click="ansFourty = 5">
                        <div class="radio-box" :class="{'active': ansFourty == 5}"></div>
                        <div class="flex1 answer">E.社区毫无作为</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 41 && (shenfeng === 1 || shenfeng === 8)">
            <div class="test-box">
                <div class="title">30.您认为社区党员形象如何？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyOne = 1">
                        <div class="radio-box" :class="{'active': ansFourtyOne == 1}"></div>
                        <div class="flex1 answer">A.社区党员形象很好，积极发挥先锋模范带头作用，参与社区和活动和志愿服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyOne = 2">
                        <div class="radio-box" :class="{'active': ansFourtyOne == 2}"></div>
                        <div class="flex1 answer">B.社区党员形象较好，经常发挥带头作用，较常参与社区活动和志愿服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyOne = 3">
                        <div class="radio-box" :class="{'active': ansFourtyOne == 3}"></div>
                        <div class="flex1 answer">C.社区党员形象一般，虽然没有什么负面事件发生，但是也没有发挥带头作用</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyOne = 4">
                        <div class="radio-box" :class="{'active': ansFourtyOne == 4}"></div>
                        <div class="flex1 answer">D.社区党员形象较差，偶有发生负面事件，造成较差影响</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyOne = 5">
                        <div class="radio-box" :class="{'active': ansFourtyOne == 5}"></div>
                        <div class="flex1 answer">E.社区党员形象很差，在社区居民群体中口碑不佳，造成负面影响</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsfourtyOneNext">下一题</span>
                        <span class="prev" @click="handleAnsfourtyOnePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 40 && shenfeng === 2">
            <div class="test-box">
                <div class="title">31.您认为社区工会工作（组建、换届等）做得怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyTwo = 1">
                        <div class="radio-box" :class="{'active': ansFourtyTwo == 1}"></div>
                        <div class="flex1 answer">A.很好，社区积极参与工会的组建、换届等工作，给予全力支持与帮助</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyTwo = 2">
                        <div class="radio-box" :class="{'active': ansFourtyTwo == 2}"></div>
                        <div class="flex1 answer">B.较好，社区参与工会的组建、换届等工作，并给予适量的帮助</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyTwo = 3">
                        <div class="radio-box" :class="{'active': ansFourtyTwo == 3}"></div>
                        <div class="flex1 answer">C.一般，社区有限参与工会的组建、换届工作</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyTwo = 4">
                        <div class="radio-box" :class="{'active': ansFourtyTwo == 4}"></div>
                        <div class="flex1 answer">D.较差，社区偶尔关注工会的相关工作</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyTwo = 5">
                        <div class="radio-box" :class="{'active': ansFourtyTwo == 5}"></div>
                        <div class="flex1 answer">E.社区不关心工会工作</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyTwoNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyTwoPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 41 && shenfeng === 2">
            <div class="test-box">
                <div class="title">32.您认为社区对工会的工作指导、会员服务等工作质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyThree = 1">
                        <div class="radio-box" :class="{'active': ansFourtyThree == 1}"></div>
                        <div class="flex1 answer">A.质量很好，社区积极关注工会工作并提供指导帮助，主动发放工会会员服务卡，确保工会会员充分享受个人权益</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyThree = 2">
                        <div class="radio-box" :class="{'active': ansFourtyThree == 2}"></div>
                        <div class="flex1 answer">B.质量较好，社区较为主动指导工会工作并持续跟进，向工会会员发放工会会员服务卡，保障工会会员的权益</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyThree = 3">
                        <div class="radio-box" :class="{'active': ansFourtyThree == 3}"></div>
                        <div class="flex1 answer">C.质量一般，社区对工会的工作指导提供有限，对会员的关注度一般</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyThree = 4">
                        <div class="radio-box" :class="{'active': ansFourtyThree == 4}"></div>
                        <div class="flex1 answer">D.质量较差，社区偶尔关注工会的相关工作，很少提供会员服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyThree = 5">
                        <div class="radio-box" :class="{'active': ansFourtyThree == 5}"></div>
                        <div class="flex1 answer">E.社区不关心工会工作</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyThreeNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyThreePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 40 && shenfeng === 3">
            <div class="test-box">
                <div class="title">33.您认为社区对拥军、优属和优抚相关政策宣传力度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyFour = 1">
                        <div class="radio-box" :class="{'active': ansFourtyFour == 1}"></div>
                        <div class="flex1 answer">A.宣传力度非常到位，我能详细全面的了解有关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFour = 2">
                        <div class="radio-box" :class="{'active': ansFourtyFour == 2}"></div>
                        <div class="flex1 answer">B.宣传力度比较到位，我基本了解相关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFour = 3">
                        <div class="radio-box" :class="{'active': ansFourtyFour == 3}"></div>
                        <div class="flex1 answer">C.宣传力度一般，我不太了解相关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFour = 4">
                        <div class="radio-box" :class="{'active': ansFourtyFour == 4}"></div>
                        <div class="flex1 answer">D.宣传力度较差，我需要从其他信息渠道获取相关政策信息</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFour = 5">
                        <div class="radio-box" :class="{'active': ansFourtyFour == 5}"></div>
                        <div class="flex1 answer">E.基本无宣传</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyFourNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyFourPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 41 && shenfeng === 3">
            <div class="test-box">
                <div class="title">34.您认为社区对拥军、优属和优抚的相关活动落实程度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyFive = 1">
                        <div class="radio-box" :class="{'active': ansFourtyFive == 1}"></div>
                        <div class="flex1 answer">A.社区积极组织相关活动，每年“八一”等相关节日，社区都会派人拜访慰问</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFive = 2">
                        <div class="radio-box" :class="{'active': ansFourtyFive == 2}"></div>
                        <div class="flex1 answer">B.社区经常组织相关活动，并在相关节日派人拜访慰问</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFive = 3">
                        <div class="radio-box" :class="{'active': ansFourtyFive == 3}"></div>
                        <div class="flex1 answer">C.社区很少组织相关活动，只在相关节日通过电话问候</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFive = 4">
                        <div class="radio-box" :class="{'active': ansFourtyFive == 4}"></div>
                        <div class="flex1 answer">D.社区基本不组织相关活动，也很少会在相关节日问候</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyFive = 5">
                        <div class="radio-box" :class="{'active': ansFourtyFive == 5}"></div>
                        <div class="flex1 answer">E.社区基本无视我，从来没听说过有相关活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyFiveNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyFivePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 42 && shenfeng === 3">
            <div class="test-box">
                <div class="title">35.您认为社区组织的拥军、优属和优抚相关慰问活动质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtySix = 1">
                        <div class="radio-box" :class="{'active': ansFourtySix == 1}"></div>
                        <div class="flex1 answer">A.活动质量很高，形式丰富，我能感受到社区对我的关心</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySix = 2">
                        <div class="radio-box" :class="{'active': ansFourtySix == 2}"></div>
                        <div class="flex1 answer">B.活动质量较高，只是偶尔我会感觉社区在“完成任务”</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySix = 3">
                        <div class="radio-box" :class="{'active': ansFourtySix == 3}"></div>
                        <div class="flex1 answer">C.活动质量一般，形式单一，大多时候都是在“应付差事”</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySix = 4">
                        <div class="radio-box" :class="{'active': ansFourtySix == 4}"></div>
                        <div class="flex1 answer">D.活动质量较低</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySix = 5">
                        <div class="radio-box" :class="{'active': ansFourtySix == 5}"></div>
                        <div class="flex1 answer">E.几乎没有组织活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtySixNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtySixPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 40 && shenfeng === 4">
            <div class="test-box">
                <div class="title">36.您认为社区对统战政策宣传力度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtySeven = 1">
                        <div class="radio-box" :class="{'active': ansFourtySeven == 1}"></div>
                        <div class="flex1 answer">A.宣传力度非常到位，我能详细全面的了解有关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySeven = 2">
                        <div class="radio-box" :class="{'active': ansFourtySeven == 2}"></div>
                        <div class="flex1 answer">B.宣传力度比较到位，我基本了解相关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySeven = 3">
                        <div class="radio-box" :class="{'active': ansFourtySeven == 3}"></div>
                        <div class="flex1 answer">C.宣传力度一般，我不太了解相关政策</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySeven = 4">
                        <div class="radio-box" :class="{'active': ansFourtySeven == 4}"></div>
                        <div class="flex1 answer">D.宣传力度较差，我需要从其他信息渠道获取相关政策信息</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtySeven = 5">
                        <div class="radio-box" :class="{'active': ansFourtySeven == 5}"></div>
                        <div class="flex1 answer">E.基本无宣传</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtySevenNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtySevenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 41 && shenfeng === 4">
            <div class="test-box">
                <div class="title">37.您认为社区统战活动落实程度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyEight = 1">
                        <div class="radio-box" :class="{'active': ansFourtyEight == 1}"></div>
                        <div class="flex1 answer">A.社区积极组织相关活动，主动开展走访联谊活动，经常通过沟通加强联系</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyEight = 2">
                        <div class="radio-box" :class="{'active': ansFourtyEight == 2}"></div>
                        <div class="flex1 answer">B.社区经常组织相关活动，经常开展走访联谊活动，但可以加强沟通交流</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyEight = 3">
                        <div class="radio-box" :class="{'active': ansFourtyEight == 3}"></div>
                        <div class="flex1 answer">C.社区很少组织相关活动，只是偶尔通过电话问候</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyEight = 4">
                        <div class="radio-box" :class="{'active': ansFourtyEight == 4}"></div>
                        <div class="flex1 answer">D.社区基本不组织相关活动，也很少与我沟通交流</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyEight = 5">
                        <div class="radio-box" :class="{'active': ansFourtyEight == 5}"></div>
                        <div class="flex1 answer">E.社区基本无视我，从来没听说过有相关活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyEightNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyEightPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 42 && shenfeng === 4">
            <div class="test-box">
                <div class="title">38.您认为社区组织的统战活动质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFourtyNine = 1">
                        <div class="radio-box" :class="{'active': ansFourtyNine == 1}"></div>
                        <div class="flex1 answer">A.活动质量很高，形式丰富，每次都能获取统战信息，让我体会到团结和谐的氛围</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyNine = 2">
                        <div class="radio-box" :class="{'active': ansFourtyNine == 2}"></div>
                        <div class="flex1 answer">B.活动质量较高，我能体会到社区团结和谐的氛围</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyNine = 3">
                        <div class="radio-box" :class="{'active': ansFourtyNine == 3}"></div>
                        <div class="flex1 answer">C.活动质量一般，现场气氛总体不错</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyNine = 4">
                        <div class="radio-box" :class="{'active': ansFourtyNine == 4}"></div>
                        <div class="flex1 answer">D.活动质量较低，形式单一，大多时候都是在“应付差事”</div>
                    </li>
                    <li class="dis-flex" @click="ansFourtyNine = 5">
                        <div class="radio-box" :class="{'active': ansFourtyNine == 5}"></div>
                        <div class="flex1 answer">E.几乎没有组织活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFourtyNineNext">下一题</span>
                        <span class="prev" @click="handleAnsFourtyNinePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 40 && (shenfeng === 5 || shenfeng === 9)">
            <div class="test-box">
                <div class="title">39.您认为社区工作人员在采集相关信息时服务态度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFifty = 1">
                        <div class="radio-box" :class="{'active': ansFifty == 1}"></div>
                        <div class="flex1 answer">A.态度很好，礼貌有加，主动解释采集信息的目的</div>
                    </li>
                    <li class="dis-flex" @click="ansFifty = 2">
                        <div class="radio-box" :class="{'active': ansFifty == 2}"></div>
                        <div class="flex1 answer">B.态度较好，比较有礼貌，耐心回答我为什么采集信息的问题</div>
                    </li>
                    <li class="dis-flex" @click="ansFifty = 3">
                        <div class="radio-box" :class="{'active': ansFifty == 3}"></div>
                        <div class="flex1 answer">C.态度一般，中规中矩</div>
                    </li>
                    <li class="dis-flex" @click="ansFifty = 4">
                        <div class="radio-box" :class="{'active': ansFifty == 4}"></div>
                        <div class="flex1 answer">D.态度较差，对我的提问显示出不耐烦的情绪</div>
                    </li>
                    <li class="dis-flex" @click="ansFifty = 5">
                        <div class="radio-box" :class="{'active': ansFifty == 5}"></div>
                        <div class="flex1 answer">E.态度恶劣</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftyNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftyPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 41 && (shenfeng === 5 || shenfeng === 9)">
            <div class="test-box">
                <div class="title">40.社区工作人员是否能够合规办事？</div>
                <ul>
                    <li class="dis-flex" @click="ansFiftyOne = 1">
                        <div class="radio-box" :class="{'active': ansFiftyOne == 1}"></div>
                        <div class="flex1 answer">A.工作人员的言行举止十分规范</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyOne = 2">
                        <div class="radio-box" :class="{'active': ansFiftyOne == 2}"></div>
                        <div class="flex1 answer">B.工作人员的言行举止较为规范，总体符合标准</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyOne = 3">
                        <div class="radio-box" :class="{'active': ansFiftyOne == 3}"></div>
                        <div class="flex1 answer">C.工作人员曾有过不规范行为，后来有所改进</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyOne = 4">
                        <div class="radio-box" :class="{'active': ansFiftyOne == 4}"></div>
                        <div class="flex1 answer">D.工作人员偶尔出现“吃拿卡要”的行为</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyOne = 5">
                        <div class="radio-box" :class="{'active': ansFiftyOne == 5}"></div>
                        <div class="flex1 answer">E.工作人员经常“吃拿卡要”，言行举止很不规范</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftyOneNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftyOnePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 42 && (shenfeng === 5 || shenfeng === 9)">
            <div class="test-box">
                <div class="title">请在以下选项中勾选您遇到的社区工作人员的不规范行为（可多选）</div>
                <ul>
                    <li class="dis-flex" @click="handleAnsFiftyTwo(1)">
                        <div class="radio-box" :class="{'active': ansFiftyTwo.includes(1)}"></div>
                        <div class="flex1 answer">安全生产巡查时，利用职务便利介绍第三方公司为自己牟利</div>
                    </li>
                    <li class="dis-flex" @click="handleAnsFiftyTwo(2)">
                        <div class="radio-box" :class="{'active': ansFiftyTwo.includes(2)}"></div>
                        <div class="flex1 answer">安全生产巡查时，因为与企业负责人私人关系较好，对不符合安全生产的情况视而不见或处罚较轻</div>
                    </li>
                    <li class="dis-flex" @click="handleAnsFiftyTwo(3)">
                        <div class="radio-box" :class="{'active': ansFiftyTwo.includes(3)}"></div>
                        <div class="flex1 answer">劳动巡查时，因为与企业负责人私人关系较好，对不符合劳动法律法规的情况视而不见或处罚较轻</div>
                    </li>
                    <li class="dis-flex" @click="handleAnsFiftyTwo(4)">
                        <div class="radio-box" :class="{'active': ansFiftyTwo.includes(4)}"></div>
                        <div class="flex1 answer">办理二次装修备案时，有意拖延、不按规定程序办事</div>
                    </li>
                    <li class="dis-flex">
                        <div class="item-name">其他不规范行为</div>
                        <div class="flex1 input-box"><input type="text" placeholder="请输入" v-model.trim="ansFiftyTwoVal"></div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftyTwoNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftyTwoPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 43 && (shenfeng === 5 || shenfeng === 9)">
            <div class="test-box">
                <div class="title">41.您认为社区对安全生产知识的宣传力度怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFiftyThree = 1">
                        <div class="radio-box" :class="{'active': ansFiftyThree == 1}"></div>
                        <div class="flex1 answer">A.宣传力度非常到位，活动组织频率高，专业知识强，我学到了很多安全生产知识</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyThree = 2">
                        <div class="radio-box" :class="{'active': ansFiftyThree == 2}"></div>
                        <div class="flex1 answer">B.宣传力度比较到位，活动组织频率较高，专业度较高，我能学到安全生产知识</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyThree = 3">
                        <div class="radio-box" :class="{'active': ansFiftyThree == 3}"></div>
                        <div class="flex1 answer">C.宣传力度一般，偶尔组织宣传活动，专业度有待加强</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyThree = 4">
                        <div class="radio-box" :class="{'active': ansFiftyThree == 4}"></div>
                        <div class="flex1 answer">D.宣传力度较差，很少组织宣传活动，我从中学不到什么安全生产知识</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyThree = 5">
                        <div class="radio-box" :class="{'active': ansFiftyThree == 5}"></div>
                        <div class="flex1 answer">E.基本没有组织过宣传活动</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftyThreeNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftyThreePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 40 && shenfeng === 6">
            <div class="test-box">
                <div class="title">42.您认为社区对计生政策的宣传力度怎么样？ </div>
                <ul>
                    <li class="dis-flex" @click="ansFiftyFour = 1">
                        <div class="radio-box" :class="{'active': ansFiftyFour == 1}"></div>
                        <div class="flex1 answer">A.社区积极组织各种宣传活动，我很清楚社区提供的各项计生服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFour = 2">
                        <div class="radio-box" :class="{'active': ansFiftyFour == 2}"></div>
                        <div class="flex1 answer">B.社区经常组织宣传活动，我比较了解社区提供的计生服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFour = 3">
                        <div class="radio-box" :class="{'active': ansFiftyFour == 3}"></div>
                        <div class="flex1 answer">C.社区定期组织宣传活动，我大概了解社区提供的计生服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFour = 4">
                        <div class="radio-box" :class="{'active': ansFiftyFour == 4}"></div>
                        <div class="flex1 answer">D.社区很少组织宣传，我只听说过社区会提供计生相关服务，具体有哪些不清楚</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFour = 5">
                        <div class="radio-box" :class="{'active': ansFiftyFour == 5}"></div>
                        <div class="flex1 answer">E.我完全不知道社区提供计生相关服务</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftyFourNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftyFourPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 41 && shenfeng === 6">
            <div class="test-box">
                <div class="title">43.您认为计生药具发放智能机的维护与运营情况怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFiftyFive = 1">
                        <div class="radio-box" :class="{'active': ansFiftyFive == 1}"></div>
                        <div class="flex1 answer">A.智能机内计生药具库存充足，智能机运行正常</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFive = 2">
                        <div class="radio-box" :class="{'active': ansFiftyFive == 2}"></div>
                        <div class="flex1 answer">B.智能机内计生药具库存不足但能及时补充药品，智能机出现小故障能及时修复</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFive = 3">
                        <div class="radio-box" :class="{'active': ansFiftyFive == 3}"></div>
                        <div class="flex1 answer">C.智能机内计生药具库存不足且补充药品时间较晚，智能机出现故障维修较晚</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFive = 4">
                        <div class="radio-box" :class="{'active': ansFiftyFive == 4}"></div>
                        <div class="flex1 answer">D.智能机内计生药具库存缺货且无人补充药品，智能机经常出现故障无法正常运行</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftyFive = 5">
                        <div class="radio-box" :class="{'active': ansFiftyFive == 5}"></div>
                        <div class="flex1 answer">E.智能机易损坏且无人维修</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftyFiveNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftyFivePrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 42 && shenfeng === 6">
            <div class="test-box">
                <div class="title">44.您认为社区提供的优生体检服务质量怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFiftySix = 1">
                        <div class="radio-box" :class="{'active': ansFiftySix == 1}"></div>
                        <div class="flex1 answer">A.质量很高，社区免费提供专业的计生优生体检，工作人员能耐心讲解并提供服务</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySix = 2">
                        <div class="radio-box" :class="{'active': ansFiftySix == 2}"></div>
                        <div class="flex1 answer">B.质量较高，社区提供较好的计生优生体检，工作人员专业性较高，服务意识较强</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySix = 3">
                        <div class="radio-box" :class="{'active': ansFiftySix == 3}"></div>
                        <div class="flex1 answer">C.质量一般，中规中矩</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySix = 4">
                        <div class="radio-box" :class="{'active': ansFiftySix == 4}"></div>
                        <div class="flex1 answer">D.质量较差，工作人员的专业性与服务意识有待提高</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySix = 5">
                        <div class="radio-box" :class="{'active': ansFiftySix == 5}"></div>
                        <div class="flex1 answer">E.社区不提供相关服务</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftySixNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftySixPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-box" v-show="curPage === 43 && shenfeng === 6">
            <div class="test-box">
                <div class="title">45.您认为社区计生卫生工作人员工作效率怎么样？</div>
                <ul>
                    <li class="dis-flex" @click="ansFiftySeven = 1">
                        <div class="radio-box" :class="{'active': ansFiftySeven == 1}"></div>
                        <div class="flex1 answer">A.工作效率极高，能够快速有效的为我解决问题</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySeven = 2">
                        <div class="radio-box" :class="{'active': ansFiftySeven == 2}"></div>
                        <div class="flex1 answer">B.工作效率较高，能够较为高效的为我解决问题</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySeven = 3">
                        <div class="radio-box" :class="{'active': ansFiftySeven == 3}"></div>
                        <div class="flex1 answer">C.工作效率一般，中规中矩</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySeven = 4">
                        <div class="radio-box" :class="{'active': ansFiftySeven == 4}"></div>
                        <div class="flex1 answer">D.工作效率较低，我的诉求不能及时给予反馈</div>
                    </li>
                    <li class="dis-flex" @click="ansFiftySeven = 5">
                        <div class="radio-box" :class="{'active': ansFiftySeven == 5}"></div>
                        <div class="flex1 answer">E.工作效率极低，对我的诉求置之不理</div>
                    </li>
                </ul>
                <div class="dis-flex ope-btn">
                    <div>
                        <span class="next" @click="handleAnsFiftySevenNext">下一题</span>
                        <span class="prev" @click="handleAnsFiftySevenPrev">上一题</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第1 ~ 28 题  end -->
        

        <!-- 问卷结束   start -->
        <div class="info-box" v-show="isShowCompleted">
            <div class="form-box">
                <div class="form">
                    <div class="title">问卷结束</div>
                    <div class="state">感谢您的支持与配合</div>
                    <textarea placeholder="您对社区工作是否还有其他意见与建议？如有，请在此栏填写" class="more-state" v-model="remark"></textarea>
                </div>
            </div>
            <div class="submit-btn"><span @click="handleComplete">提交</span></div>
        </div>
        <!-- 问卷结束   end -->

        <!-- 问卷已提交   start -->
        <div class="finished" v-show="isShowFinished">
            <img src="@/assets/images/finished@2x.png">
            <div class="state">您的问卷已经提交</div>
        </div>
        <!-- 问卷已提交   end -->
        <van-popup
            v-model="showArea"
            position="bottom"
            custom-style="height: 35%">
            <van-area
                :value="curChooseArea"
                :area-list="areaList"
                @confirm="handleChooseArea"
                @cancel="handleCloseArea"
                title="点击选择">
            </van-area>
        </van-popup>
        
    </div>
</template>

<script>
    import { loadIn, loadOut, toast } from '@/js/lib/utils';
    import { dealCode } from '@/js/lib/dealCode';
    import AreaList from '@/js/lib/area';

    export default {
        data () {
            return {
                isShowBg: null,
                isWelcome: null,
                curPage: '',
                isShowCompleted: false,
                isShowFinished: false,

                huji: '',
                nianlin: '',
                zhiye: '',
                wenhua: null,
                wenhuaList: [],
                wenhuaName: '',
                zhengzhi: null,
                zhengzhiList: [],
                zhengzhiName: '',
                shijian: '',
                shijianName: '',
                workTime: '',
                workTimeName: '',
                shequ: null,
                shequList: [],
                shequName: '',
                shenfeng: null,
                shenfengList: [
                    // {
                    //     'name': '两代表一委员',
                    //     'value': 1
                    // },
                    // {
                    //     'name': '工会代表',
                    //     'value': 2
                    // },
                    // {
                    //     'name': '退伍军人、军属、优抚对象代表',
                    //     'value': 3
                    // },
                    // {
                    //     'name': '统战对象代表',
                    //     'value': 4
                    // },
                    // {
                    //     'name': '企业代表、',
                    //     'value': 5
                    // },
                    // {
                    //     'name': '育龄妇女代表',
                    //     'value': 6
                    // },
                    // {
                    //     'name': '其他',
                    //     'value': 7
                    // },
                    // {
                    //     'name': '基层党员代表',
                    //     'value': 8
                    // },
                    // {
                    //     'name': '三小场所经营者代表',
                    //     'value': 9
                    // }
                ],
                shenfengName: '',
                shijianList: [
                    {
                        'name': '1年以下',
                        'value': '1'
                    },
                    {
                        'name': '1-2年',
                        'value': '2'
                    },
                    {
                        'name': '2-3年',
                        'value': '3'
                    },
                    {
                        'name': '3年以上',
                        'value': '4'
                    }
                ],

                ansOne: '',
                ansTwo: '',
                ansThree: '',
                ansFour: '',
                ansFive: '',
                ansSix: '',
                ansSeven: '',
                ansEight: '',
                ansNine: '',
                ansTen: '',
                ansEleven: '',
                ansTwelve: '',
                ansThirteen: '',
                ansFourteen: '',
                ansFiveteen: '',
                ansSixTeen: '',
                ansSeventeen: '',
                ansEighteen: '',
                ansNineteen: '',
                ansTwentyOne: '',
                ansTwentyTwo: '',
                ansTwentyThree: '',
                ansTwentyfour: '',
                ansTwentyFive: '',
                ansTwentySix: '',
                ansTwentySeven: '',
                ansTwentyEight: '',
                ansTwentyNine: '',
                ansThirty: '',
                ansThirtyOne: '',
                ansThirtyTwe: '',
                ansThirtyThree: '',
                ansThirtyFour: '',
                ansThirtyFive: '',
                ansThirtySix: '',
                ansThirtySeven: '',
                ansThirtyEight: '',
                ansThirtyNine: '',
                ansFourty: '',
                ansFourtyOne: '',
                ansFourtyTwo: '',
                ansFourtyThree: '',
                ansFourtyFour: '',
                ansFourtyFive: '',
                ansFourtySix: '',
                ansFourtySeven: '',
                ansFourtyEight: '',
                ansFourtyNine: '',
                ansFifty: '',
                ansFiftyOne: '',
                ansFiftyTwo: [],
                ansFiftyTwoVal: '',
                ansFiftyThree: '',
                ansFiftyFour: '',
                ansFiftyFive: '',
                ansFiftySix: '',
                ansFiftySeven: '',

                remark: '',
                showArea: false,
                areaList: AreaList,
                curChooseArea: '110000,110100'
            }
        },
        async mounted() {
            loadIn();
            let hasAnswered = await this.isHasAnswered();
            // let hasAnswered = 1
            if(hasAnswered == 1) {
                //未回答
                this.isShowBg = true;
                this.isWelcome = true;
                let configList = await this.loadConfig();
                this.wenhuaList = configList['education'];
                this.zhengzhiList = configList['politic'];
                this.shequList = configList['community'];
                this.shenfengList = configList['identity'];
            }else {
                // 已回答
                this.isShowBg = false;
                this.isWelcome = false;
                this.isShowFinished = true;
            }
            loadOut();
        },
        methods: {
            handleChooseArea(e) {
                this.huji = `${e[0]['name']}${e[1]['name']}`;
                this.showArea = false;
            },
            handleCloseArea () {
                this.showArea = false;
            },
            isHasAnswered() {
                return new Promise((resolve, reject) => {
                    this.$http.post(API.questionnaireCheck, {})
                    .then(response => {
                        resolve(response.data.code);
                    })
                    .catch(error => {
                        reject(error);
                    });
                })
            },
            loadConfig() {
                return new Promise((resolve, reject) => {
                    this.$http.post(API.questionnaireConfig, {})
                    .then(response => {
                        dealCode({
                            code: response.data.code,
                            successCallback: () => {
                                resolve(response.data.data);
                            },
                            completeDeal: () => {
                                loadOut();
                            }
                        })
                    })
                    .catch(error => {
                        resolve(error);
                    });
                })
            },
            getStart() {
                this.isWelcome = false;
                this.curPage = 1;
            },
            handleWenhua(e) {
                let obj = this.wenhuaList.find(item => {return item.id === (+e.target.value)});
                if(obj) {
                    this.wenhuaName = obj['name'];
                }else {
                    this.wenhuaName  = '';
                }
            },
            handleZhengzhi(e) {
                let obj = this.zhengzhiList.find(item => {return item.id === (+e.target.value)});
                if(obj) {
                    this.zhengzhiName = obj['name'];
                }else {
                    this.zhengzhiName = '';
                }
            },
            handleShijian(e) {
                let obj = this.shijianList.find(item => {return item.value === e.target.value});
                if(obj) {
                    this.shijianName = obj['name'];
                }else {
                    this.shijianName = '';
                }
            },
            handleWorkTime(e) {
                let obj = this.shijianList.find(item => {return item.value === e.target.value});
                if(obj) {
                    this.workTimeName = obj['name'];
                }else {
                    this.workTimeName = '';
                }
            },
            handleShequ(e) {
                let obj = this.shequList.find(item => {return item.id === (+e.target.value)});
                if(obj) {
                    this.shequName = obj['name'];
                }else {
                    this.shequName = '';
                }
            },
            handleShenfeng(e) {
                let obj = this.shenfengList.find(item => {return item.id === (+e.target.value)});
                if(obj) {
                    this.shenfengName = obj['name'];
                }else {
                    this.shenfengName = '';
                }
            },
            submitInfo() {
                // console.log(this.huji, this.nianlin, this.zhiye, this.wenhua);
                if(this.huji === '') {
                    toast('请选择户籍!');
                    return;
                }
                if(this.nianlin === '') {
                    toast('请填写年龄!');
                    return;
                }
                if(this.zhiye === '') {
                    toast('请填写职业!');
                    return;
                }
                if(!this.wenhua) {
                    toast('请选择文化程度!');
                    return;
                }
                if(!this.zhengzhi) {
                    toast('请选择政治面貌!');
                    return;
                }
                // if(this.shijian === '') {
                //     toast('请填写本社区居住/工作时间!');
                //     return;
                // }
                if(!this.shequ) {
                    toast('请选择所属社区!');
                    return;
                }
                /*
                if(this.shijian === '') {
                    toast('请选择本社区居住时间!');
                    return;
                }
                if(this.workTime === '') {
                    toast('请选择工作时间!');
                    return;
                }
                */
                if(this.shijian === '' && this.workTime === '') {
                    toast('居住时间和本社区工作时间必填一项!');
                    return;
                }
                if(!this.shenfeng) {
                    toast('请选择所属身份!');
                    return;
                }
                this.isShowBg = false;
                this.curPage = 2;
            },
            handleAnsOneNext() {
                if(!this.ansOne) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwoNext() {
                if(!this.ansTwo) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwoPrev() {
                this.ansTwo = '';
                this.curPage--;
            },
            handleAnsThreeYes() {
                this.ansThree = 1;
                this.curPage++;
            },
            handleAnsThreeNo() {
                this.ansThree = 2;
                this.curPage += 2;
            },
            handleAnsFourNext() {
                if(!this.ansFour) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourPrev() {
                this.ansFour = '';
                this.curPage--;
            },
            handleAnsFiveNext() {
                if(!this.ansFive) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFivePrev() {
                this.ansFive = '';
                if(this.ansThree == 1) {
                    this.curPage--;
                    // this.ansFive = '';
                }else {
                    this.curPage -= 2;
                    // this.ansFive = '';
                    // this.ansFour = '';
                }
            },
            handleAnsSixNext() {
                if(!this.ansSix) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsSixPrev() {
                this.ansSix = '';
                this.curPage--;
            },
            handleAnsSevenYes() {
                this.ansSeven = 1;
                this.curPage++;
            },
            handleAnsSevenNo() {
                this.ansSeven = 2;
                this.curPage += 2;
            },
            handleAnsEightNext() {
                if(!this.ansEight) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsEightPrev() {
                this.ansEight = '';
                this.curPage--;
            },
            handleAnsNineNext() {
                if(!this.ansNine) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsNinePrev() {
                this.ansNine = '';
                if(this.ansSeven == 1) {
                    this.curPage--;
                    // this.ansNine = '';
                }else {
                    this.curPage -= 2;
                    // this.ansNine = '';
                    // this.ansEight = '';
                }
            },
            handleAnsTenNext() {
                if(!this.ansTen) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTenPrev() {
                this.ansTen = '';
                this.curPage--;
            },
            handleAnsElevenNext() {
                if(!this.ansEleven) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsElevenPrev() {
                this.ansEleven = '';
                this.curPage--;
            },
            
            handleAnsTwelveNext() {
                if(!this.ansTwelve) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwelvePrev() {
                this.ansTwelve = '';
                this.curPage--;
            },
            handleAnsThirteenYes() {
                this.ansThirteen = 1;
                this.curPage++;
            },
            handleAnsThirteenNo() {
                this.ansThirteen = 2;
                this.curPage += 3;
            },
            handleAnsFourTeenNext() {
                if(!this.ansFourteen) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourTeenPrev() {
                this.ansFourteen = '';
                this.curPage--;
            },
            handleAnsFiveTeenNext() {
                if(!this.ansFiveteen) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFiveTeenPrev() {
                this.ansFiveteen = '';
                this.curPage--;
            },
            handleAnsSixteenYes() {
                this.ansSixTeen = 1;
                this.curPage++;
            },
            handleAnsSixteenNo() {
                this.ansSixTeen = 2;
                this.curPage += 2;
            },
            
            handleAnsSeventeenNext() {
                if(!this.ansSeventeen) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsSeventeenPrev() {
                this.ansSeventeen = '';
                this.curPage--;
            },
            handleAnsEighteenYes() {
                this.ansEighteen = 1;
                this.curPage++;
            },
            handleAnsEighteenNo() {
                this.ansEighteen = 2;
                this.curPage += 2;
            },
            handleAnsNineteenNext() {
                if(!this.ansNineteen) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsNineteenPrev() {
                this.ansNineteen = '';
                this.curPage--;
            },
            handleAnsTwentyOneYes() {
                this.ansTwentyOne = 1;
                this.curPage++;
            },
            handleAnsTwentyOneNo() {
                this.ansTwentyOne = 2;
                this.curPage += 2;
            },
            handleAnsTwentyTwoNext() {
                if(!this.ansTwentyTwo) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwentyTwoPrev() {
                this.ansTwentyTwo = '';
                this.curPage--;
            },
            handleAnsTwentyThreeNext() {
                if(!this.ansTwentyThree) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwentyThreePrev() {
                this.ansTwentyThree = '';
                if(this.ansTwentyOne == 1) {
                    this.curPage--;
                    // this.ansTwentyThree = '';
                }else {
                    this.curPage -= 2;
                    // this.ansTwentyThree = '';
                    // this.ansTwentyTwo = '';
                }
            },
            handleAnsTwentyfourYes() {
                this.ansTwentyfour = 1;
                this.curPage++;
            },
            handleAnsTwentyfourNo() {
                this.ansTwentyfour = 2;
                this.curPage += 3;
            },
            handleAnsTwentyFiveNext() {
                if(!this.ansTwentyFive) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwentyFivePrev() {
                this.ansTwentyFive = '';
                this.curPage--;
            },
            handleAnsTwentySixNext() {
                if(!this.ansTwentySix) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwentySixPrev() {
                this.ansTwentySix = '';
                this.curPage--;
            },
            handleAnsTwentySevenYes() {
                this.ansTwentySeven = 1;
                this.curPage++;
            },
            handleAnsTwentySevenNo() {
                this.ansTwentySeven = 2;
                this.curPage += 2;
            },
            handleAnsTwentyEightNext() {
                if(!this.ansTwentyEight) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsTwentyEightPrev() {
                this.ansTwentyEight = '';
                this.curPage--;
            },
            handleAnsTwentyNineYes() {
                this.ansTwentyNine = 1;
                this.curPage++;
            },
            handleAnsTwentyNineNo() {
                this.ansTwentyNine = 2;
                this.curPage += 2;
            },
            
            handleAnsThirtyNext() {
                if(!this.ansThirty) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyPrev() {
                this.ansThirty = '';
                this.curPage--;
            },
            handleAnsThirtyOneNext() {
                if(!this.ansThirtyOne) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyOnePrev() {
                this.ansThirtyOne = '';
                if(this.ansTwentyNine == 1) {
                    this.curPage--;
                }else {
                    this.curPage -= 2;
                }
            },
            handleAnsThirtyTweNext() {
                if(!this.ansThirtyTwe) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyTwePrev() {
                this.ansThirtyTwe = '';
                this.curPage--;
            },
            
            handleAnsThirtyThreeNext() {
                if(!this.ansThirtyThree) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyThreePrev() {
                this.ansThirtyThree = '';
                this.curPage--;
            },
            handleAnsThirtyFourNext() {
                if(!this.ansThirtyFour) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyFourPrev() {
                this.ansThirtyFour = '';
                this.curPage--;
            },
            
            handleAnsThirtyFiveNext() {
                if(!this.ansThirtyFive) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyFivePrev() {
                this.ansThirtyFive = '';
                this.curPage--;
            },
            handleAnsThirtySixNext() {
                if(!this.ansThirtySix) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtySixPrev() {
                this.ansThirtySix = '';
                this.curPage--;
            },
            handleAnsThirtySevenYes() {
                this.ansThirtySeven = 1;
                this.curPage++;
            },
            handleAnsThirtySevenNo() {
                this.ansThirtySeven = 2;
                this.curPage += 3;
                if(this.shenfeng === 7) this.handleEnd();
            },
            handleAnsThirtyEightNext() {
                if(!this.ansThirtyEight) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsThirtyEightPrev() {
                this.ansThirtyEight = '';
                this.curPage--;
            },
            
            handleAnsFourtyNext() {
                if(!this.ansFourty) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourtyPrev() {
                this.ansFourty = '';
                this.curPage--;
            },
            handleAnsfourtyOneNext() {
                if(!this.ansFourtyOne) {
                    toast('请选择选项');
                    return;
                }
                this.handleEnd();
            },
            handleAnsfourtyOnePrev() {
                this.ansFourtyOne = '';
                this.curPage--;
            },
            handleAnsFourtyTwoNext() {
                if(!this.ansFourtyTwo) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourtyTwoPrev() {
                this.ansFourtyTwo = '';
                this.curPage--;
            },
            handleAnsFourtyThreeNext() {
                if(!this.ansFourtyThree) {
                    toast('请选择选项');
                    return;
                }
                this.handleEnd();
            },
            handleAnsFourtyThreePrev() {
                this.ansFourtyThree = '';
                this.curPage--;
            },
            
            handleAnsFourtyFourNext() {
                if(!this.ansFourtyFour) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourtyFourPrev() {
                this.ansFourtyFour = '';
                this.curPage--;
            },
            
            handleAnsFourtyFiveNext() {
                if(!this.ansFourtyFive) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourtyFivePrev() {
                this.ansFourtyFive = '';
                this.curPage--;
            },
            
            handleAnsFourtySixNext() {
                if(!this.ansFourtySix) {
                    toast('请选择选项');
                    return;
                }
                this.handleEnd();
            },
            handleAnsFourtySixPrev() {
                this.ansFourtySix = '';
                this.curPage--;
            },
            handleAnsFourtySevenNext() {
                if(!this.ansFourtySeven) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourtySevenPrev() {
                this.ansFourtySeven = '';
                this.curPage--;
            },
            handleAnsFourtyEightNext() {
                if(!this.ansFourtyEight) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFourtyEightPrev() {
                this.ansFourtyEight = '';
                this.curPage--;
            },
            handleAnsFourtyNineNext() {
                if(!this.ansFourtyNine) {
                    toast('请选择选项');
                    return;
                }
                this.handleEnd();
            },
            handleAnsFourtyNinePrev() {
                this.ansFourtyNine = '';
                this.curPage++;
            },
            handleAnsFiftyNext() {
                if(!this.ansFifty) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFiftyPrev() {
                this.ansFifty = '';
                this.curPage--;
            },
            handleAnsFiftyOneNext() {
                if(!this.ansFiftyOne) {
                    toast('请选择选项');
                    return;
                }
                if(this.ansFiftyOne == 3 || this.ansFiftyOne == 4 || this.ansFiftyOne == 5) {
                    this.curPage++;
                }else {
                    // this.ansFiftyTwo = [];
                    // this.ansFiftyTwoVal = '';
                    this.curPage += 2;
                }
            },
            handleAnsFiftyOnePrev() {
                this.ansFiftyOne = '';
                this.curPage--
            },

            handleAnsFiftyTwo(val) {
                let index = this.ansFiftyTwo.findIndex(e => e == val);
                if(index > -1) {
                    this.ansFiftyTwo.splice(index, 1);
                }else {
                    this.ansFiftyTwo.push(val);
                }
            },
            handleAnsFiftyTwoNext() {
                if(this.ansFiftyTwo.length == 0 && this.ansFiftyTwoVal === '') {
                    toast('请选择选项或填写其他描述');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFiftyTwoPrev() {
                this.ansFiftyTwo = [];
                this.ansFiftyTwoVal = '';
                this.curPage--;
            },
            handleAnsFiftyThreeNext() {
                if(!this.ansFiftyThree) {
                    toast('请选择选项');
                    return;
                }
                this.handleEnd();
            },
            handleAnsFiftyThreePrev() {
                this.ansFiftyThree = '';
                if(this.ansFiftyOne == 3 || this.ansFiftyOne == 4 || this.ansFiftyOne == 5) {
                    this.curPage--;
                }else {
                    this.curPage -= 2;
                }
            },
            handleAnsFiftyFourNext() {
                if(!this.ansFiftyFour) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFiftyFourPrev() {
                this.ansFiftyFour = '';
                this.curPage--;
            },
            handleAnsFiftyFiveNext() {
                if(!this.ansFiftyFive) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFiftyFivePrev() {
                this.ansFiftyFive = '';
                this.curPage--;
            },
            
            handleAnsFiftySixNext() {
                if(!this.ansFiftySix) {
                    toast('请选择选项');
                    return;
                }else {
                    this.curPage++;
                }
            },
            handleAnsFiftySixPrev() {
                this.ansFiftySix = '';
                this.curPage--;
            },
            
            handleAnsFiftySevenNext() {
                if(!this.ansFiftySeven) {
                    toast('请选择选项');
                    return;
                }
                this.handleEnd();
            },
            handleAnsFiftySevenPrev() {
                this.ansFiftySeven = '';
                this.curPage--;
            },
            //28问题下一步操作
            handleAnsThirtyNineNext() {
                if(!this.ansThirtyNine) {
                    toast('请选择选项');
                    return;
                }
                if(this.shenfeng !== 7) {
                    this.curPage++;
                }else {
                    this.handleEnd();
                }
            },
            handleAnsThirtyNinePrev() {
                this.ansThirtyNine = '';
                this.curPage--;
            },
            handleEnd() {
                //提交答案
                loadIn();
                let choose = '';
                if(this.ansFiftyTwo.length > 0) {
                    choose = this.ansFiftyTwo.join(',');
                }
                let answer_list = [
                    {'question': 1, 'answer': this.ansOne},
                    {'question': 2, 'answer': this.ansTwo},
                    {'question': 3, 'answer': this.ansFour},
                    {'question': 4, 'answer': this.ansFive},
                    {'question': 5, 'answer': this.ansSix},
                    {'question': 6, 'answer': this.ansEight},
                    {'question': 7, 'answer': this.ansNine},
                    {'question': 8, 'answer': this.ansTen},
                    {'question': 9, 'answer': this.ansEleven},
                    {'question': 10, 'answer': this.ansTwelve},
                    {'question': 11, 'answer': this.ansFourteen},
                    {'question': 12, 'answer': this.ansFiveteen},
                    {'question': 13, 'answer': this.ansSeventeen},
                    {'question': 14, 'answer': this.ansNineteen},
                    {'question': 15, 'answer': this.ansTwentyTwo},
                    {'question': 16, 'answer': this.ansTwentyThree},
                    {'question': 17, 'answer': this.ansTwentyFive},
                    {'question': 18, 'answer': this.ansTwentySix},
                    {'question': 19, 'answer': this.ansTwentyEight},
                    {'question': 20, 'answer': this.ansThirty},
                    {'question': 21, 'answer': this.ansThirtyOne},
                    {'question': 22, 'answer': this.ansThirtyTwe},
                    {'question': 23, 'answer': this.ansThirtyThree},
                    {'question': 24, 'answer': this.ansThirtyFour},
                    {'question': 25, 'answer': this.ansThirtyFive},
                    {'question': 26, 'answer': this.ansThirtySix},
                    {'question': 27, 'answer': this.ansThirtyEight},
                    {'question': 28, 'answer': this.ansThirtyEight},
                    {'question': 29, 'answer': this.ansFourty},
                    {'question': 30, 'answer': this.ansFourtyOne},
                    {'question': 31, 'answer': this.ansFourtyTwo},
                    {'question': 32, 'answer': this.ansFourtyThree},
                    {'question': 33, 'answer': this.ansFourtyFour},
                    {'question': 34, 'answer': this.ansFourtyFive},
                    {'question': 35, 'answer': this.ansFourtySix},
                    {'question': 36, 'answer': this.ansFourtySeven},
                    {'question': 37, 'answer': this.ansFourtyEight},
                    {'question': 38, 'answer': this.ansFourtyNine},
                    {'question': 39, 'answer': this.ansFifty},
                    {'question': 40, 'answer': this.ansFiftyOne, 'remark': {'chose': choose, 'remark': this.ansFiftyTwoVal}},
                    {'question': 41, 'answer': this.ansFiftyThree},
                    {'question': 42, 'answer': this.ansFiftyFour},
                    {'question': 43, 'answer': this.ansFiftyFive},
                    {'question': 44, 'answer': this.ansFiftySix},
                    {'question': 45, 'answer': this.ansFiftySeven}
                ];
                this.$http.post(API.questionnaireAnswer, {
                    'household_register': this.huji,
                    'age': this.nianlin,
                    'occupation': this.zhiye,
                    'education_id': this.wenhua,
                    'politic_id': this.zhengzhi,
                    'live_time': this.shijian,
                    'work_time': this.workTime,
                    'community_id': this.shequ,
                    'identity_id': this.shenfeng,
                    'answer_list': JSON.stringify(answer_list)
                })
                .then(response => {
                    dealCode({
                        code: response.data.code,
                        successCallback: () => {
                            this.curPage++;
                            this.isShowBg = true;
                            this.isShowCompleted = true;
                        },
                        completeDeal: () => {
                            loadOut();
                        }
                    })
                })
                .catch(error => {
                    console.log(error);
                });
            },
            handleComplete() {
                //提交答案
                if(this.remark.replace(/\s+/g, '') === '') {
                    toast('请输入其他意见与建议');
                    return;
                }
                loadIn();
                this.$http.post(API.questionnaireRemark, {
                    'remark': this.remark.replace(/\r\n/g, '').replace(/\n/g, '')
                })
                .then(response => {
                    dealCode({
                        code: response.data.code,
                        successCallback: () => {
                            this.isShowBg = false;
                            this.isShowCompleted = false;
                            this.isShowFinished = true;
                        },
                        completeDeal: () => {
                            loadOut();
                        }
                    })
                })
                .catch(error => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style lang="scss" scoped type="text/css">
    @import '@/assets/css/utils.scss';

    img.bg-img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height:100%;
        z-index: 1;
    }
    .info-box {
        z-index: 2;
        position: relative;
    }
    .main-title {
        padding: 70px 60px 60px;
        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }
    .respect {
        padding: 0 60px 100px;;
        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }
    .join-btn {
        font-size: 0;
        text-align: center;
        span {
            display: inline-block;
            height: 90px;
            line-height: 90px;
            padding: 0 132px;
            font-size: 24px;
            font-weight: bold;
            color: rgba(50,103,254,1);
            -webkit-border-radius: 43px;
            -moz-border-radius: 43px;
            border-radius: 43px;
            background: rgba(255,255,255,1);
        }
    }
    .bottom-state {
        position: fixed;
        bottom: 40px;
        left: 0;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 24px;
        color: #fff;
    }
    .form-box {
        padding: 90px 45px 50px;
        .form {
            padding: 70px 37px 37px;
            background-color: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            position: relative;
            .title {
                position: absolute;
                top: -42px;
                left: 50%;
                padding: 0 94px;
                height: 85px;
                line-height: 85px;
                color: #fff;
                font-size: 24px;
                font-weight: bold;
                -webkit-border-radius: 43px;
                -moz-border-radius: 43px;
                border-radius: 43px;
                background-color: #356Bfe;
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                transform: translateX(-50%);
                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    display: block;
                    width: 14px;
                    height: 14px;
                    background-color: #fff;
                    -webkit-border-radius: 100%;
                    -moz-border-radius: 100%;
                    border-radius: 100%;
                    -webkit-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    transform: translateY(-50%);
                }
                &::before {
                    left: 13px;
                }
                &::after {
                    right: 13px;
                }
            }
            ul li {
                padding: 15px 0;
                border-bottom: #cdd3e1 1px solid;
                .item-name {
                    width: 250px;
                    line-height: 60px;
                    font-size:24px;
                    font-weight: bold;
                    color:rgba(152,157,168,1);
                    padding-left: .2rem;
                    position: relative;
                }
                .require {
                    &::before {
                        content: '*';
                        position: absolute;
                        top: 0;
                        left: 0;
                        color: red;
                    }
                }
                input {
                    display: block;
                    width: 100%;
                    height: 60px;
                    border: none;
                    text-align: right;
                    font-size: 30px;
                    &::-webkit-input-placeholder { 
                        color: #cdd3e1;
                        font-size: 24px;
                    }
                }
                .select-box {
                    height: 60px;
                    line-height: 60px;
                    -webkit-justify-content: flex-end;
                    -moz-justify-content: flex-end;
                    justify-content: flex-end;
                    position: relative;
                    .choose-val {
                        font-size: 30px;
                        padding-right: 10px;
                        width: 100%;
                        text-align: right;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    img {
                        display: block;
                        width: 12px;
                        height: 20px;
                    }
                    select {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                    }
                }
            }
            .state {
                font-size: 30px;
                font-weight:  bold;
                text-align: center;
                padding: 20px 0 47px;
            }
            textarea.more-state {
                display: block;
                width: 100%;
                outline: none;
                border: none;
                padding: 30px;
                background-color: #f6f9ff;
                min-height: 600px;
                resize: none;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                &::-webkit-input-placeholder { 
                    color: #989da8;
                    font-size: 24px;
                }
            }
        }
    }
    .submit-btn {
        font-size: 0;
        text-align: center;
        span {
            display: inline-block;
            font-size: 24px;
            font-weight: bold;
            height: 90px;
            line-height: 90px;
            padding: 0 156px;
            color: #3267fe;
            background-color: #fff;
            -webkit-border-radius: 43px;
            -moz-border-radius: 43px;
            border-radius: 43px;
        }
    }
    .test-box {
        padding: 80px 45px 50px;
        .title {
            font-size: 30px;
            font-weight: bold;
            padding-bottom: 60px;
        }
        ul {
            padding-bottom: 110px;
        }
        li {
            padding-bottom: 40px;
            .radio-box {
                width: 22px;
                height: 22px;
                border: 2px solid rgba(159,164,175,1);
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
                border-radius: 100%;
                margin-top: 6px;
                position: relative;
                &.active {
                    border: 2px solid #356bfe;
                    &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        display: block;
                        width: 10px;
                        height: 10px;
                        background-color: #356bfe;
                        -webkit-transform: translate(-50%, -50%);
                        -moz-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                        -webkit-border-radius: 100%;
                        -moz-border-radius: 100%;
                        border-radius: 100%;
                    }
                }
            }
            .answer {
                padding-left: 24px;
                font-size:24px;
                line-height: 36px;
            }
            .item-name {
                width: 220px;
                line-height: 60px;
            }
            .input-box {
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 1px;
                    background-color: #cdd3e1;
                }
                input {
                    display: block;
                    width: 100%;
                    height: 60px;
                    border: none;
                    font-size: 24px;
                    &::-webkit-input-placeholder { 
                        color: #cdd3e1;
                    }
                }
            }
        }
    }
    .ope-btn {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        span {
            display: block;
            height: 90px;
            line-height: 90px;
            padding: 0 144px;
            -webkit-border-radius: 43px;
            -moz-border-radius: 43px;
            border-radius: 43px;
            margin-bottom: 30px;
            &.next {
                color: #fff;
                background-color: #356bfe;
            }
            &.prev {
                background-color: #eef4ff;
            }
        }
    }
    .either-or-box {
        padding-top: 120px;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        span {
            display: block;
            width: 136px;
            height:136px;
            line-height: 140px;
            color: #cdd3e1;
            border: #cdd3e1 2px solid;
            font-size: 30px;
            font-weight:bold;
            text-align: center;
            margin-bottom: 100px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            &.active {
                color: #fff;
                background-color: #356bfe;
                border: #356bfe 2px solid;
            }
            /*
            &.yes {
                color: #fff;
                background-color: #356bfe;
                border: #356bfe 2px solid;
            }
            &.no {
                color: #cdd3e1;
                border: #cdd3e1 2px solid;
            }
            */
        }
    }
    .finished {
        position: absolute;
        top: 30%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%);
        img {
            display: block;
            max-width: 420px;
            height: auto;
            margin-bottom: 55px;
        }
        .state {
            font-size: 24px;
            color: #356bfe;
            text-align: center;
            font-weight: bold;
        }
    }
    .huji-box {
        line-height: 60px;
        text-align: right;
        font-size: 30px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .none-data {
        line-height: 60px;
        color: #cdd3e1;
        font-size: 24px;
        text-align: right;
    }
</style>
